.page-wrap {
  float: left;
  width: 100%;
  transition: width 0.1s ease;
}

.main-nav {
  position: fixed;
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  background: #3B3B3B;
  overflow: hidden;
  transition: width 0.1s ease;
  font-family: cambria;
  z-index: 5000;
}
.main-nav .userPanel .medal{
    background: #0082bb;
    padding: 10px;
}
.main-nav .userPanel{
    /*position: absolute;*/
    overflow: hidden;
    /*bottom: 0;*/
    color: #fff;
    width: 100%;
    background-color: #292929;
    padding-bottom: 30px;
}
.main-nav .userPanel img.avatar{
    width: 75px;
    float: left;
    margin-right: 10px;
}
.main-nav .userPanel .userInfo{
    width: 63%;
}
.main-nav .userPanel .userInfo p span{
  display: block;
}

.main-nav .userPanel .userNav{}
.main-nav .userPanel .userNav a{
    background: #e6542a;
    border: 0;
    display: inline;
    padding: 5px;
    margin-left: 10px;
}
.main-nav .userPanel h5{
    margin-bottom: 3px;
}
.main-nav .userPanel p{
    margin-bottom: 0;
    font-size: 0.85em;
    line-height: 1.2em;
}
.main-nav .userPanel ul{
    padding: 10px;
    margin-bottom: 10px;
}
.main-nav .userPanel ul li{
    list-style: square inside none;
}
.main-nav .userPanel a{}
.main-nav h1{
  text-align: left;
  padding: 10px 0;
  color: #fff;
  margin-bottom: 10px;
  margin-left: 10px;
}
.main-nav h1{
  
}
.main-nav h1 a{
  background: none;
  border: 0px;
  margin-right: 20px;
  margin-top: 11px;
  font-size: 15px;
  background-color: #e6542a;
  padding: 0px 10px;
  height: 30px;
  line-height: 30px;
}
.main-nav h1 a:hover{
  background: none;
  background-color: #e6542a;
}
.main-nav a {
  display: block;
  background: linear-gradient(#3e3e3e, #383838);
  border-top: 1px solid #484848;
  border-bottom: 1px solid #2E2E2E;
  color: white;
  padding: 10px;
}
.main-nav ul li ul{
  height: auto;
  padding-top: 4px;
  padding-left: 5px;
  display: none;
  background-color: #2e2e2e;
  margin-bottom: 0;
  -webkit-transition: 0.1s all ease;
  -moz-transition: 0.1s all ease;
  -ms-transition: 0.1s all ease;
  -o-transition: 0.1s all ease;
  transition: 0.1s all ease;
}
.main-nav ul li:hover > ul{
  padding: 10px;
  opacity: 1;
  height: auto;
  display: block;
  -webkit-transition: 0.1s all ease;
  -moz-transition: 0.1s all ease;
  -ms-transition: 0.1s all ease;
  -o-transition: 0.1s all ease;
  transition: 0.1s all ease;
}
.main-nav ul li ul li{
    display: inline-block; 
    background-color: #0181b9;
    margin-bottom: 4px;
    padding: 0;
}
.main-nav ul li ul li a{
    display: inline-block;
    padding: 0 5px;
    background: none;
    border: 0px;
}
.main-nav ul li ul li a:hover{
  background: none;
}
.main-nav a:hover, .main-nav a:focus {
  background: linear-gradient(#484848, #383838);
}
.main-nav:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 34px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
}
.close-menu{
  display: none;
}
#main-nav:target {
  width: 20%;
}

#main-nav:target + .page-wrap {
  width: 80%;
}
#main-nav:target + .page-wrap .open-menu {
  display: none;
}
#main-nav:target + .page-wrap .close-menu {
  display: block;
}
#main-nav:target + .page-wrap .main-header {
  width: 80%;
  left: 20%;
}
.animateScale{
    animation: animateImages 5s infinite;
    -webkit-animation: animateImages 5s infinite;
}

@-webkit-keyframes animateImages{
    0%{
        -webkit-webkit-transform: scale(1);
        -moz-webkit-transform: scale(1);
        -ms-webkit-transform: scale(1);
        -o-webkit-transform: scale(1);
        -webkit-transform: scale(1);
    }
    50%{
        -webkit-webkit-transform: scale(1.2);
        -moz-webkit-transform: scale(1.2);
        -ms-webkit-transform: scale(1.2);
        -o-webkit-transform: scale(1.2);
        -webkit-transform: scale(1.2);
    }
    100%{
        -webkit-webkit-transform: scale(1);
        -moz-webkit-transform: scale(1);
        -ms-webkit-transform: scale(1);
        -o-webkit-transform: scale(1);
        -webkit-transform: scale(1);
    }
}

/* Standard syntax */

@keyframes animateImages{
    0%{
        -webkit-webkit-transform: scale(1);
        -moz-webkit-transform: scale(1);
        -ms-webkit-transform: scale(1);
        -o-webkit-transform: scale(1);
        -webkit-transform: scale(1);
    }
    50%{
        -webkit-webkit-transform: scale(1.2);
        -moz-webkit-transform: scale(1.2);
        -ms-webkit-transform: scale(1.2);
        -o-webkit-transform: scale(1.2);
        -webkit-transform: scale(1.2);
    }
    100%{
        -webkit-webkit-transform: scale(1);
        -moz-webkit-transform: scale(1);
        -ms-webkit-transform: scale(1);
        -o-webkit-transform: scale(1);
        -webkit-transform: scale(1);
    }
}












